<template>
  <div class="circle">
    <div class="circle-text">
      <div class="circle-txtMgs">{{circleInfo.txtMgs}}</div>
      <div class="circle-numMsg">{{circleInfo.numMsg}}</div>
      <div class="circle-title">{{circleInfo.title}}</div>
    </div>
    <img :src="circleInfo.src">
  </div>
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
      }
    },
    props: {
      circleInfo: {
        type: Object
      }
    }
  }
</script>
<style scoped>
  .circle{position: relative; width: 212px; height: 197px; text-align: center}
  .circle .img{width: 100%; height: 100%;}
  .circle-text{position: absolute; width: 100%; color: #fff; text-align: center}
  .circle-title{padding-top: 50px; margin:0; font-size: 16px;}
  .circle-numMsg{margin-top: 127px; font-size: 16px;}
  .circle-txtMgs{margin-top: 110px; font-size: 16px;}
</style>
